import { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Taro from '@tarojs/taro'
import { View, Button, Text, Input } from '@tarojs/components'

import { login } from '../../actions/user'

import './index.scss'

// 使用bindActionCreators时
@connect(
  null,
  dispatch => bindActionCreators({ login }, dispatch)
)


class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {
      phone: '',
      password: ''
    }
  }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  jumpBack = () => {
    Taro.redirectTo({
      url: '/pages/index/index'
    })
  }

  // 点击登录
  login = () => {
    const { phone, password } = this.state
    if (!phone) {
      Taro.showToast({
        title: '手机号不能为空!',
        icon: 'none',
        mask: true,
        duration: 1500
      })
      return false
    }

    if (!password) {
      Taro.showToast({
        title: '密码不能为空!',
        icon: 'none',
        mask: true,
        duration: 1500
      })
      return false
    }

    this.props.login({
      phone: '15768614257',
      password: '123'
    })
  }

  // 点击跳转注册页面
  register = () => {
    Taro.navigateTo({
      url: '/pages/register/index'
    })
  }

  render () {
    const { phone, password } = this.state

    return (
      <View className='login'>
        <View><Text>登录页面</Text></View>
        <View>
          <View>
            <View>
              <View>手机号</View>
              <View>
                <Input
                  value={phone}
                  type='text'
                  placeholder='请输入手机号'
                  onInput={e => this.setState({ phone: e.detail.value })}
                />
              </View>
            </View>
            <View>
              <View>密码</View>
              <View>
                <Input
                  value={password}
                  type='number'
                  password
                  placeholder='请输入密码'
                  onInput={e => this.setState({ password: e.detail.value })}
                />
              </View>
            </View>
          </View>
          <Button style={{ background: '#6190e8', color: '#ffffff' }} onClick={this.login}>
            登录
          </Button>
          <Button style={{ background: '#6190e8', color: '#ffffff' }} onClick={this.register}>
            免费注册
          </Button>
          <Button style={{ background: '#6190e8', color: '#ffffff' }} onClick={this.jumpBack}>
            返回首页
          </Button>
        </View>
      </View>
    )
  }
}

export default Login
